﻿@model TestOnlineProject.Models.Entities.TestModel
@{
    ViewBag.Title = "Quick Test";
}
@{
    if (!String.IsNullOrEmpty(ViewBag.Error))
    {
    <script>
            alert("@ViewBag.Msg");
            window.location.href = "@Url.Content("~/Test/Index")?subjectId=@ViewBag.Subject.SubjectId";
    </script>
    }
}
<script>
    var grade = false;
    var found = false;
    var checkFlag = false;
    
    $(document).ready(function() {
        $("button[name=Hint]").click(function() {
            if ($("#ShowHint").is(":visible")) {
                $("#ShowHint").hide();
            } else {
                $("#ShowHint").show();
            }
        });

        $("button[name=Finish]").click(function() {
            $("button[value=Result]").click();
        });

        $("button[value=Submit]").click(function() {
            if (@Model.Questions[@ViewBag.CurrentQuestion].QuestionTypeId == 1 || @Model.Questions[@ViewBag.CurrentQuestion].QuestionTypeId == 4) {
                checkFlag = false;
                var i = $("#select").val();
                if (i == "") {
                    alert("You must select Answer before Submit!");
                    checkFlag = true;
                } else {
                    $.ajax({
                        url: './CheckAnswer?answerId=' + i + '-&userTestId=@Model.userTestId&grade=' + grade + '&sectionId=@ViewBag.Section.SectionId',
                        type: 'GET',
                        success: function(result) {
                            var src = "";

                            src = '@Url.Content("~/Images/invalid.png")';
                            var img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                            $(".Picture").html(img);
                            $(".Picture").show();

                            if (result > 0) {
                                src = '@Url.Content("~/Images/valid.png")';
                            } else {
                                src = '@Url.Content("~/Images/invalid.png")';
                            }

                            $("." + @ViewBag.CurrentQuestion).attr('disabled', 'disabled');
                            var img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                            $(".Picture_" + i).html(img);
                            $(".Picture_" + i).show();

                            var currentQuestion = parseInt($("#currentQuestion").val());
                            var questionId = $("#Questions_" + currentQuestion + "__QuestionId").val();
                            $.ajax({
                                url: '@Url.Content("~/Test/FindTrueAnswer")?questionId=' + questionId + '&userTestId=@Model.userTestId',
                                type: 'GET',
                                success: function(answerId) {
                                    src = '@Url.Content("~/Images/valid.png")';
                                    img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                                    $(".Picture_" + answerId).html(img);
                                    $(".Picture_" + answerId).show();
                                }
                            });

                            var total = (parseFloat(@Model.Mark) + parseFloat(result)) / 100;
                            var realTotal = total.toFixed(2);
                            $("#title").html("<b>Question @(ViewBag.CurrentQuestion + 1)</b>    <b>Mark: " + realTotal + "/@Model.NumberOfQuestions</b>");
                            $("#Mark").val(Math.round(parseFloat(@Model.Mark) + parseFloat(result), 2));

                            var finishQuestion = currentQuestion + 1;
                            var numberOfQuestion = parseInt($("#NumberOfQuestions").val());
                            if (numberOfQuestion == finishQuestion) {
                                $("button[value=Result]").css('display', 'block');
                            } else {
                                $("button[value=Next]").css('display', 'block');
                            }
                            $("button[value=Submit]").css('display', 'none');
                            checkFlag = false;
                        }
                    });
                }
            }

            if (@Model.Questions[@ViewBag.CurrentQuestion].QuestionTypeId == 2) {
                checkFlag = false;
                var val = "";
                $(':checkbox:checked').each(function() {
                    val += $(this).attr('id') + "-";
                });
                if (val == "") {
                    alert("You must select at least one answer!");
                    checkFlag = true;
                } else {
                    $.ajax({
                        url: '@Url.Content("~/Test/CheckAnswer")?answerId=' + val + '&userTestId=@Model.userTestId&grade=' + grade  + '&sectionId=@ViewBag.Section.SectionId',
                        type: 'GET',
                        success: function(result) {
                            // Mark
                            var total = (parseFloat(@Model.Mark) + parseFloat(result)) / 100;
                            var realTotal = total.toFixed(2);
                            $("#title").html("<b>Question @(ViewBag.CurrentQuestion + 1)</b>    <b>Mark: " + realTotal + "/@Model.NumberOfQuestions</b>");
                            $("#Mark").val(Math.round(parseFloat(@Model.Mark) + parseFloat(result), 2));

                            // Display answer
                            var currentQuestion = parseInt($("#currentQuestion").val());
                            var questionId = $("#Questions_" + currentQuestion + "__QuestionId").val();
                            $.ajax({
                                url: '@Url.Content("~/Test/FindTrueAnswer")?questionId=' + questionId + '&userTestId=@Model.userTestId',
                                type: 'GET',
                                success: function(data) {
                                    var answerId = data.split("-");
                                    var src = "";
                                    var img = "";
                                    src = '@Url.Content("~/Images/invalid.png")';
                                    img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                                    $(".Picture").html(img);
                                    $(".Picture").show();
                                    jQuery.each(answerId, function(i, value) {
                                        src = '@Url.Content("~/Images/valid.png")';
                                        img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                                        $(".Picture_" + value).html(img);
                                        $(".Picture_" + value).show();
                                    });
                                }
                            });

                            $("input[type='checkbox']").each(function() {
                                $(this).attr('disabled', 'disabled');
                            });

                            // Display button
                            var finishQuestion = currentQuestion + 1;
                            var numberOfQuestion = parseInt($("#NumberOfQuestions").val());
                            if (numberOfQuestion == finishQuestion) {
                                $("button[value=Result]").css('display', 'block');
                            } else {
                                $("button[value=Next]").css('display', 'block');
                            }
                            $("button[value=Submit]").css('display', 'none');
                            checkFlag = false;
                        }
                    });
                }
            }

            if (@Model.Questions[@ViewBag.CurrentQuestion].QuestionTypeId == 3) {
                checkFlag = false;
                var match = "";
                var answer = "";
                var numberAnswer = 0;
                $('select').each(function() {
                    answer += $(this).attr('id') + "-";
                    match += $(this).val() + "-";
                    numberAnswer++;
                });

                var check = match.split("-");
                
                for(var j = 0; j < numberAnswer; j++) {
                    if (check[j] == "") {
                        checkFlag = true;
                    }
                }
                
                if (checkFlag) {
                    alert("Please matching all of them before submit!");
                } else {
                    $.ajax({
                        url: '@Url.Content("~/Test/CheckAnswer")?answerId=' + answer + '&userTestId=@Model.userTestId&grade=' + grade + '&matchingId=' + match  + '&sectionId=@ViewBag.Section.SectionId',
                        type: 'GET',
                        success: function(result) {
                            if (result == 99) result = parseFloat(result) + 1;
                            // Mark
                            var total = (parseFloat(@Model.Mark) + parseFloat(result)) / 100;
                            var realTotal = total.toFixed(2);
                            $("#title").html("<b>Question @(ViewBag.CurrentQuestion + 1)</b>    <b>Mark: " + realTotal + "/@Model.NumberOfQuestions</b>");
                            $("#Mark").val(Math.round(parseFloat(@Model.Mark) + parseFloat(result), 2));

                            // Display answer
                            var currentQuestion = parseInt($("#currentQuestion").val());
                            var questionId = $("#Questions_" + currentQuestion + "__QuestionId").val();
                            $.ajax({
                                url: '@Url.Content("~/Test/FindTrueAnswer")?questionId=' + questionId + '&userTestId=@Model.userTestId',
                                type: 'GET',
                                success: function(data) {
                                    var spliter = data.split("E");
                                    jQuery.each(spliter, function(i, value) {
                                        var id = value.split("-");
                                        var content = $('select[id=' + id[0] + '] option[value=' + id[1] + ']').text();
                                        $(".Match_" + id[0]).html(content);
                                        $(".Match_" + id[0]).show();
                                    });
                                    var answerId = answer.split("-");
                                    var matchId = match.split("-");
                                    var count = 0;
                                    jQuery.each(spliter, function(i, value) {
                                        var id = value.split("-");
                                        var src = "";
                                        var img = "";
                                        for(var i = 0; i < answerId.length; i++)
                                        {
                                            if(id[0] == answerId[i])
                                            {
                                                if(id[1] == matchId[i])
                                                {
                                                    src = '@Url.Content("~/Images/valid.png")';
                                                    img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                                                    $(".Picture_" + answerId[i]).html(img);
                                                    $(".Picture_" + answerId[i]).show();
                                                    break;
                                                } else {
                                                    src = '@Url.Content("~/Images/invalid.png")';
                                                    img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
                                                    $(".Picture_" + answerId[i]).html(img);
                                                    $(".Picture_" + answerId[i]).show();
                                                    break;
                                                }
                                            }
                                        }
                                        count++;
                                    });
                                }
                            });

                            // Display button
                            var finishQuestion = currentQuestion + 1;
                            var numberOfQuestion = parseInt($("#NumberOfQuestions").val());
                            if (numberOfQuestion == finishQuestion) {
                                $("button[value=Result]").css('display', 'block');
                            } else {
                                $("button[value=Next]").css('display', 'block');
                            }
                            $("button[value=Submit]").css('display', 'none');
                            checkFlag = false;
                        }
                    });
                }
            }
        });
    });
    
    function check(c, i) {
        $("." + c).attr('checked', false);
        $("#" + i).attr('checked', true);
        $("#select").val(i);
//        $.ajax({
//            url: './CheckAnswer?answerId=' + i + '-&userTestId=@Model.userTestId&grade=' + grade,
//            type: 'GET',
//            success: function(result) {
//                var src = "";
//                if (result > 0) {
//                    src = '@Url.Content("~/Images/valid.png")';
//                    found = true;
//                    $("." + @ViewBag.CurrentQuestion).attr('disabled', 'disabled');
//                } else {
//                    src = '@Url.Content("~/Images/invalid.png")';
//                }
//                var img = "<img class='img-circle' src='" + src + "' style='height:20px'/>";
//                $(".Picture_" + i).html(img);
//                $(".Picture_" + i).show();
//                if (!grade) {
//                    var total = parseFloat(@Model.Mark) + parseFloat(result);
//                    $("#title").html("<b>Question @(ViewBag.CurrentQuestion + 1)</b>    <b>Mark: " + total + "</b>");
//                    $("#Mark").val(total);
//                }

//                grade = true;
//                var currentQuestion = parseInt($("#currentQuestion").val());
//                var finishQuestion = currentQuestion + 1;
//                var numberOfQuestion = parseInt($("#NumberOfQuestions").val());
//                if (found) {
//                    if (numberOfQuestion == finishQuestion) {
//                        $("button[value=Result]").css('display', 'block');
//                    } else {
//                        $("button[value=Next]").css('display', 'block');
//                        found = false;
//                    }
//                }
//            }
//        });
    }
</script>
<div style="width: 100%; height: auto; border: 1px solid gray; border-radius: 5px;
                                      -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: -5px 5px 5px #888">
    <table id="top" class="table table-bordered" style="background: #F7F7F9; padding: 10px 0 10px 10px;
        border: none">
        <tr>
            <td style="font-weight: bold; border: none">
                <div style="font-size: 20px">
                    <b>Quick Test</b></div>
                <div>
                    <span>Subject: @ViewBag.Subject.Name</span>
                </div>
                <div>
                    <span>Start Time: @Model.StartTime
                    </span>
                </div>
                <div>
                    <span>Number of Questions: @Model.NumberOfQuestions
                    </span>
                </div>
                <div style="float: right; padding-top: 3px">
                    <button type="button" class="btn" name="Finish">
                        Finish Test</button>
                </div>
            </td>
        </tr>
    </table>
    <div id="title" style="background-color: orange; padding-left: 20px">
        <b>Question @(ViewBag.CurrentQuestion + 1)</b>
        @{
            var mark = Math.Round(@Model.Mark / 100, 2);
            var mark1 = mark.ToString("0.00");
        }
        <b>Mark: @mark1/@Model.NumberOfQuestions</b>
    </div>
    <div id="content" style="padding: 0 0 20px 20px">
        @using (Html.BeginForm("QuickTest", "Test", FormMethod.Post, new { id = "form" }))
        {
            @Html.HiddenFor(model => Model.userTestId)
            @Html.HiddenFor(model => Model.StartTime)
            @Html.HiddenFor(model => Model.NumberOfQuestions)
            @Html.HiddenFor(model => Model.Mark)
            <input type="hidden" name="sectionId" id="sectionId" value="@ViewBag.Section.SectionId"/>
            <input type="hidden" id="currentQuestion" name="currentQuestion" value="@ViewBag.CurrentQuestion"/>
            <input type="hidden" id="select" name="select" value="" />
            for (int i = 0; i < @Model.Questions.Count; i++)
            {
                if (i != @ViewBag.CurrentQuestion)
                {
                    @Html.HiddenFor(model => Model.Questions[i].QuestionId)
                }
                else
                {
                    <table class="table" style="table-layout: fixed">
                        <tr>
                            <td>
                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Content)</span>
                            </td>
                        </tr>
                        @{
                            @Html.HiddenFor(model => Model.Questions[i].QuestionTypeId)
                            @Html.HiddenFor(model => Model.Questions[i].QuestionId)

                            // If QuestionType is single choice or true/false.
                            if (Model.Questions[i].QuestionTypeId == 1 || Model.Questions[i].QuestionTypeId == 4)
                            {
                                for (var j = 0; j < Model.Questions[i].Answers.Count; j++)
                                {
                                    <tr>
                                        <td>
                                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].AnswerId)
                                            @{
                                                var id = Model.Questions[i].Answers[j].AnswerId;
                                                var call = "check(" + i + "," + id + ")";
                                            }
                                            @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].Checked, new { type = "radio", @class = @i, id = @id, onclick = @call })
                                            @{
                                                var answerNo = j + 1;
                                            }
                                            <span>@answerNo/ </span>
                                            <div style="display: inline-block">
                                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Answers[j].Content)</span>
                                            </div>
                                            <span class="Picture Picture_@id" style="width: 20px"></span>
                                        </td>
                                    </tr>
                                }
                            }

                            // If QuestionType is multiple choice.
                            if (Model.Questions[i].QuestionTypeId == 2)
                            {
                                for (var j = 0; j < Model.Questions[i].Answers.Count; j++)
                                {
                                    <tr>
                                        <td>
                                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].AnswerId)
                                            @{
                                                var id = Model.Questions[i].Answers[j].AnswerId;
                                            }
                                            @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].Checked, new { id = @id })
                                            @{
                                                var answerNo = j + 1;
                                            }
                                            <span>@answerNo/ </span>
                                            <div style="display: inline-block">
                                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Answers[j].Content)</span>
                                            </div>
                                            <span class="Picture Picture_@id" style="display: none"></span>
                                        </td>
                                    </tr>
                                }
                            }

                            // If QuestionType is matching.
                            if (Model.Questions[i].QuestionTypeId == 3)
                            {
                                for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
                                {
                                    <tr>
                                        <td>
                                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].AnswerId)
                                            @{
                                                var id = Model.Questions[i].Answers[j].AnswerId;
                                                var answerNo = j + 1;
                                            }
                                            <span>@answerNo/ </span>
                                            <div style="display: inline-block">
                                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Answers[j].Content)</span>
                                            </div>
                                            <div style="margin-top: 10px">
                                                <img src="@Url.Content("~/Images/2.gif")" style="margin-left: 20px; margin-bottom: 10px" alt=""/>
                                                @Html.DropDownListFor(model => model.Questions[i].Answers[j].MatchId, ViewData[Model.Questions[i].QuestionId.ToString()] as SelectList, "--- Select your answer ---", new { style = "padding: 0px; margin: 0px; width: 50%; vertical: middle", id = @id })
                                                <span class="Picture_@id" style="display: none"></span>
                                            </div>
                                            <br />
                                            <span class="Match_@id" style="display: none; text-align: left; background-color: #D9EDF7; padding: 3px 0 3px 0">
                                            </span>
                                        </td>
                                    </tr>
                                }
                            }
                        }
                    </table>
                    <div id="control" class="row-fluid" style="margin-bottom: 5px; margin-top: 10px">
                        @if (@Model.Questions[i].Explanation != "")
                        {
                            <span style="padding-left: 20px">
                                <button type="button" class="btn" name="Hint" style="width: 120px">Show Hint</button>
                            </span>
                        }
                        <span style="float: right; padding-right: 20px">
                            <button type="submit" class="btn" name="submit" value="Result" style="display: none">View Result</button>
                            <button type="submit" class="btn" name="submit" value="Next" style="width: 80px;display: none">Next</button>
                            <button type="button" class="btn" value="Submit" style="width: 80px">Submit</button>
                        </span>
                    </div>
                    <div id="ShowHint" class="row-fluid" style="display: none; margin-bottom: 20px">
                        <div class="span11" style="border: 1px solid; margin-left: 20px; margin-right: 50px">
                            @Html.Raw(@Model.Questions[i].Explanation)
                        </div>
                    </div>
                }
            }
        }
    </div>
</div>